<template>
  <div style="border:2px solid red">
    这里是二级路由页面
    <!-- 第一种方式使用path，v-bind的对象形式动态绑定data中的值！url="/third?userid=12" -->
    <router-link :to="{path:'/third?userid='+userid}">三级路由页面展示</router-link> |

    <router-link :to="{path:'/third',query:{userid:8899}}">三级路由页面展示</router-link>

    <!-- 第二种方式使用name属性，v-bind的对象形式动态绑定data中的值！url="/third?userid=12"
    $route.params.uid 则可以取出userid的值！ -->
    <router-link :to="{name:'Third',query:{userid:userid}}">三级路由页面展示</router-link> |

    <!--    新增按钮 使用  this.$router 来跳转-->
    <button @click="toThird()">跳转到三级路由页面</button>
    <router-view/>
  </div>
</template>

<script>

export default {
  data() {
    return {
      userid: 10059,
    }
  },
  methods:{
    toThird(){
      this.$router.push({
        path:'/third',
        query:{
          userid:9999
        }
      })
    }
  }

}
</script>
